<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { reactive, provide, PropType, computed, watch, ref, toRef } from "vue";
import todoHeader from "./components/todo_header.vue";
import todoInput from "./components/todo_input.vue";
import todoItem from "./components/todo_item.vue";
import todoFooter from "./components/todo_footer.vue";
let todos: todo[] = reactive(JSON.parse(localStorage.getItem("todos")) || []);
let data = reactive({
  newtodos: JSON.parse(localStorage.getItem("todos")) || [],
  appSearch: (title: string) => {
    data.newtodos = JSON.parse(localStorage.getItem("todos"));
    isSearchShow.value = true;
    for (let i = 0; i < todos.length; i++) {
      data.newtodos.forEach((todo: todo, index: Number) => {
        let j = 0;
        if (todo.title !== title && j == 0) {
          data.newtodos.splice(index, 1);
          j++;
        }
      });
    }
  },
});
// function appSearch(title: string) {
//   newtodos = JSON.parse(localStorage.getItem("todos"));
//   isSearchShow.value = true;
//   for (let i = 0; i < newtodos.length; i++) {
//     newtodos.forEach((todo, index) => {
//       let j = 0;
//       if (todo.title !== title && j == 0) {
//         newtodos.splice(index, 1);
//         j++;
//       }
//     });
//   }
//   console.log(newtodos);
// }
let isSearchShow = ref(false);
provide("todos", todos);
//给todo设定类型限制
type todo = {
  id: string;
  title: string;
  done: boolean;
};
const props = defineProps({
  newtodos: Array as unknown as PropType<[todo]>,
  default: () => [],
});
function appAdd(data: todo) {
  todos.unshift(data);
  console.log(todos);
}
function AppChange(id: string, title: string) {
  //foreach循环todos找到符合的id
  todos.forEach((todo) => {
    if (todo.id === id) todo.title = title;
  });
}
function AppDelete(id: string) {
  // filter在vue3中已经被移除
  // todos = todos.filter((todo) => todo.id !== id);
  // console.log(todos);
  todos.forEach((todo, index) => {
    if (todo.id === id) todos.splice(index, 1);
  });
}

watch(todos, (newValue) => {
  localStorage.setItem("todos", JSON.stringify(todos));
});
function appTotalchange(isTotalDone: boolean) {
  if (isTotalDone) {
    todos.forEach((todo) => {
      todo.done = false;
    });
  } else {
    todos.forEach((todo) => {
      todo.done = true;
    });
  }
}
</script>

<template>
  <div class="middle">
    <todoHeader></todoHeader>

    <todoInput
      :todos="todos"
      :appAdd="appAdd"
      :appSearch="data.appSearch"
    ></todoInput>
    <div class="searchResult">
      <span>搜索结果</span>
      <todoItem
        v-show="isSearchShow"
        :todos="data.newtodos"
        :AppChange="AppChange"
        :AppDelete="AppDelete"
      ></todoItem>
    </div>
    <span>原本的todo列表</span>
    <todoItem
      :todos="todos"
      :AppChange="AppChange"
      :AppDelete="AppDelete"
    ></todoItem>
    <todoFooter :todos="todos" :appTotalchange="appTotalchange"> </todoFooter>
  </div>
</template>

<style scoped>
.middle {
  width: 1000px;
  height: 1000px;
  margin: auto;
  box-shadow: -1px -14px 30px rgb(0 0 0 / 8%);
}
.todo {
  width: 535px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.searchResult {
  margin-bottom: 20px;
}
</style>
